<template>
  <div>
    <div class="page-title">HSE问题统计</div>

    <div class="page-content">
      <el-form :model="filterQuery" inline>
        <el-form-item label="审核区域">
          <treeselect
            placeholder="请选择审核区域"
            :multiple="true"
            :flat="true"
            v-model="companyData"
            :options="options"
            style="width: 180px;"
          ></treeselect>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker
            type="date"
            placeholder="请选择开始时间"
            v-model="filterQuery.startDate"
            value-format="yyyy-MM-dd"
            style="width: 160px"
          ></el-date-picker>
          <span>-</span>
          <el-date-picker
            placeholder="请选择结束时间"
            v-model="filterQuery.endDate"
            value-format="yyyy-MM-dd"
            style="width: 160px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审核轮次">
          <el-input
            placeholder="请输入审核轮次"
            v-model="filterQuery.round"
            style="width: 130px"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="handleSearch()" style="width: 70px">查询</el-button>
        <el-button type="info" @click="drawHighCharts()" style="width:110px">查看统计图</el-button>
      </el-form>

      <el-alert title="仅子节点可选中" type="warning" center show-icon :closable="false"></el-alert>
      <p></p>
      <el-table
        :data="tableData"
        ref="tableDataRef"
        row-key="code"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :default-sort="{ prop: 'num', order: 'descending' }"
        @selection-change="selected"
        style="width: 100%; margin-bottom: 20px"
        border
      >
        <el-table-column type="selection" :selectable="selectAble"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="审核主题" prop="subject"></el-table-column>
        <el-table-column label="问题数量" prop="num" sortable></el-table-column>
        <el-table-column
          v-for="(company, index) in companyCols"
          :key="index"
          :label="company.companyName"
          :prop="company.props"
        ></el-table-column>
      </el-table>

      <div id="histogram" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>

<script>
import { GetCompany } from "../../../services/cq_gettreedata";
import { GetHSEProblemNum } from "../../../services/hseAudit";
import HighCharts from "highcharts";

export default {
  data() {
    return {
      filterQuery: {
        companyCode: "01",
        companyName: "",
        startDate: "",
        endDate: "",
        round: "",
      },
      options: [],
      companyData: [],
      tableData: [],
      companyCols: [],
      xAxisData: [],
      seriesData: [],
    };
  },
  mounted() {
    this.getCompanyCode();
    this.handleSearch();
  },
  methods: {
    getCompanyCode() {
      GetCompany().then((res) => {
        this.options = res.data;
      });
    },
    handleSearch() {
      this.filterQuery.companyCode = this.companyData.join(",");
      this.companyCols = [];
      GetHSEProblemNum(this.filterQuery).then((res) => {
        this.tableData = res.data;
        if (res.data.length > 10) {
          this.tableData = res.data.slice(0, 10);
        } else {
          this.tableData = res.data;
        }
        for (var i in res.data[0].company) {
          this.companyCols.push({
            companyName: res.data[0].company[i].name,
            props: "company[" + i + "].value",
          });
        }
      });
    },
    selected(selection) {
      this.xAxisData = [];
      this.seriesData = [];
      this.companyCols.map((name) => {
        this.seriesData.push({
          name: name.companyName,
          data: [],
        });
      });
      selection.map((item) => {
        if (item.children == null) {
          if (this.xAxisData.indexOf(item.subject) == -1) {
            this.xAxisData.push(item.subject);
            this.seriesData.map((series) => {
              item.company.map((data) => {
                if (data.name == series.name) {
                  series.data.push(data.value);
                }
              });
            });
          }
        } else {
          item.children.map((subject) => {
            if (this.xAxisData.indexOf(subject.subject) == -1) {
              this.xAxisData.push(subject.subject);
              this.seriesData.map((series) => {
                item.children.map((subject) => {
                  this.$refs.tableDataRef.toggleRowSelection(subject, true);
                  subject.company.map((data) => {
                    if (data.name == series.name) {
                      series.data.push(data.value);
                    }
                  });
                });
              });
            }
          });
        }
      });
    },
    selectAble(row) {
      if(row.children == null) {
        return true
      }
      else {
        return false
      }
    },
    drawHighCharts() {
      HighCharts.chart("histogram", {
        chart: {
          type: "column",
        },
        title: {
          text: "",
        },
        xAxis: {
          categories: this.xAxisData,
        },
        yAxis: {
          min: 0,
          title: {
            text: "问题个数",
          },
          stackLabels: {
            enabled: true,
            style: {
              fontWeight: "bold",
            },
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          symbolHeight: 12,
          symbolWidth: 18,
          symbolRadius: 2,
          padding: -10,
          margin: 40,
          navigation: {
            activeColor: "#3E576F",
            animation: true,
            arrowSize: 12,
            inactiveColor: "#CCC",
            style: {
              fontWeight: "bold",
              color: "#333",
              fontSize: "12px",
            },
          },
        },
        tooltip: {
          formatter: function () {
            return (
              "<b>" +
              this.x +
              "</b><br/>" +
              this.series.name +
              ": " +
              this.y +
              "<br/>" +
              "总量: " +
              this.point.stackTotal
            );
          },
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          column: {
            stacking: "normal",
            dataLabels: {
              enabled: true,
              color: "white",
              style: {
                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                textOutline: "1px 1px black",
              },
            },
          },
        },
        series: this.seriesData,
      });
    },
  },
};
</script>

<style>
.el-table th {
  display: table-cell !important;
}

.vue-treeselect__multi-value {
  width: 200px;
  height: 36px;
  overflow: auto;
}
</style>